<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-Equiv="content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>H5滑动</title>
<link href="" rel="stylesheet">
<style>
	body{
		padding: 0;margin: 0;width: 100%;height: 100%;
	}
	ul,li{
		list-style: none;padding: 0;margin: 0;overflow: hidden;
	}
	li{
		width: 100%;
		position: absolute;
		height: 100%;
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align:center;
	}
	img{
	}
</style>
</head>
<body>
    <div id="canvas">
    </div>
<script>
var list=[
        {
            width:1080,
            height:481,
            src:"images/publicistpage/com_banner1.jpg"
        },
        {
            width:1080,
            height:477,
            src:"images/publicistpage/com_banner2.jpg"
        },
        {
            width:1080,
            height:482,
            src:"images/publicistpage/com_banner3.jpgg"
        }
    ];
function Slider(opts){
	this.wrap = opts.dom;
	this.list = opts.list;

	this.init();
	this.renderDOM();
	this.bindDOM()
}
Slider.prototype.init=function(){
	this.ratio = window.innerHeight/window.innerWidth;
	this.scaleP =window.innerWidth;
	this.idx=0;
	this.arrLi=[]
}
Slider.prototype.renderDOM=function(){
	var wrap =this.wrap;
	var list =this.list;
	var len = list.length;
	var scale = this.scaleP;
	var arrLi = this.arrLi;
	this.outer = document.createElement('ul');
	for(var i=0;i<len;i++){
		var li = document.createElement('li');
		var item = list[i];
		if(item['height']/item['width'] > this.ratio){
			li.innerHTML ='<img src="'+ item['src'] +'" height="'+ window.innerHeight+'">'
		}else{
			li.innerHTML ='<img src="'+ item['src'] +'" width="'+ window.innerWidth+'">'
		}
		li.index =i;
		this.arrLi.push(li)	
	}
	this.outer.appendChild(arrLi[0])
	arrLi[0].style.webkitTransform ='translate3d(0,0,0)'
	this.outer.style.height = window.innerHeight +'px';
	wrap.appendChild(this.outer)
	this.arrLen = this.arrLi.length
};
Slider.prototype.bindDOM=function(){
	var self = this;
	var outer = self.outer;
	var scale = self.scaleP; 
	var arrLi = self.arrLi;
	var arrLen = self.arrLen;
	
	var startHandler = function(evt){
		evt.preventDefault();
		self.startX = evt.touches[0].pageX;
		self.startTime = new Date();
		var idx = self.idx;
		var i = idx-1;
		var m = idx+1;
		if(arrLi[i]){
			outer.insertBefore(arrLi[i],outer.childNodes[0]) && (arrLi[i].style.webkitTransform ='translate3d('+ (-self.scaleP)+'px,0,0)')
		}else{
			outer.insertBefore(arrLi[arrLen-1],outer.childNodes[0]) && (arrLi[arrLen-1].style.webkitTransform ='translate3d('+ (-self.scaleP)+'px,0,0)')	
		}
		if(arrLi[m]){
			outer.appendChild(arrLi[m]) && (arrLi[m].style.webkitTransform ='translate3d('+ (self.scaleP)+'px,0,0)')
		}else{			
			outer.appendChild(arrLi[0]) && (arrLi[0].style.webkitTransform ='translate3d('+ (self.scaleP)+'px,0,0)')
		}
		
	}
	var moveHandler = function(evt){
		evt.preventDefault();
		self.offsetX = evt.touches[0].pageX - self.startX;
		var lis = outer.getElementsByTagName('li');
		for(var i=0;i<3;i++){
			lis[i].style.webkitTransition='0';
			lis[i].style.webkitTransform ='translate3d('+((i-1)*scale+self.offsetX)+'px,0,0)'
		}
	}
	var endHandler = function(evt){
		var boudary = scale/6;
		var endTime = new Date()
		var times = (endTime-self.startTime)*1;
		if(times>400){
			if(self.offsetX>boudary){
				self.go("-1")
				
			}else if(self.offsetX<-boudary){
				self.go("+1")
			}else{
				self.go("0")
			}
		}else{
			if(self.offsetX>0){
				self.go("-1")
			}else if(self.offsetX<0){
				self.go("+1")
			}else{
				self.go("0")
			}
		}
	}

	outer.addEventListener("touchstart",startHandler);
	outer.addEventListener("touchmove",moveHandler);
	outer.addEventListener("touchend",endHandler);
};
Slider.prototype.go = function(n){
	var idx = this.idx;
	var cidx;
	var arrLi = this.arrLi
	var arrLen = this.arrLen;
	var scale =this.scaleP;
	var outer = this.outer;
	var lis = outer.getElementsByTagName('li');
	if(typeof n =="number"){
		cidx = n 
	} else if(typeof n=="string"){
		cidx = idx+(n*1)
	}

	if(cidx<0){
		cidx=this.moveIdx(cidx,arrLen)
	}else if(cidx>arrLen-1){
		cidx=this.moveIdx(cidx,arrLen)
	}
	this.idx =cidx;

	var idx = n*1+1; //中间元素的索引值 其中1代表着默认中间元素的索引值
	var i = idx-1;
	var m = idx+1;

	for(i;i<=m;i++){
		lis[i] && (lis[i].style.webkitTransition='-webkit-transform 0.1s cubic-bezier(0, 0, 0.25, 1)');
		lis[i] && (lis[i].style.webkitTransform ='translate3d('+((i-idx)*scale)+'px,0,0)')
	}
	
	setTimeout(function(){
		for(var i=0;i<3;i++){
			lis[i].className='';
		}
		if(n == '+1'){
			outer.removeChild(lis[1]);
			outer.removeChild(lis[0])
		}else if(n == '-1'){
			outer.removeChild(lis[2]);
			outer.removeChild(lis[1])
		}else if( n == '0'){
			outer.removeChild(lis[2]);
			outer.removeChild(lis[0])
		}
		lis[0].className = 'active' 
	},100)
}
Slider.prototype.moveIdx=function(idx,lins){
	return (idx+lins)%lins
}
new Slider({
	'dom':document.getElementById('canvas'),
	'list':list
})
</script>
</body>
</html>